/*
 * @Description:
 * @Version: 2.0
 * @Autor: zhaoyu
 * @Date: 2021-04-16 09:26:26
 * @LastEditors: zhaoyu
 * @param:
 * @return:
 * @author: zhaoyu
 */

import React, { PureComponent } from "react";
import NewLife from "./components/newVersionReact";

export default class Index extends PureComponent {
  // 构造器
  constructor(props) {
    console.log("constructor");
    super(props);
    this.state = {
      count: 0,
      number: 0,
    };
  }

  add = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
    console.log("setState之后");
  };

  // componentWillMount() {
  //   console.log("componentWillMount", console.log(this));
  // }

  // componentDidMount() {
  //   console.log("componentDidMount");
  // }

  // componentWillUnmount() {
  //   console.log("组件将要卸载的钩子");
  // }

  // // 控制组件更新的阀门
  // shouldComponentUpdate() {
  //   console.log("是否应该进行更新，默认为true");
  //   return true;
  // }

  // componentWillUpdate() {
  //   console.log("组件将要更新的钩子");
  // }

  // // 组件更新完毕的钩子
  // componentDidUpdate() {
  //   console.log("componentDidUpdate");
  // }

  dataForm = (e) => {
    console.log(e);
    this.setState({ number: e.target.value });
  };

  render() {
    const { count, number } = this.state;
    console.log("render");
    return (
      <div>
        <h1>当前求和:{count}</h1>
        <button onClick={this.add}>点击+1</button>

        <input type="text" onChange={this.dataForm} />
        <span>显示输入的数字：{number}</span>

        <NewLife count={count} />
      </div>
    );
  }
}
